<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表的渲染</title>
</head>
<body>

<!--
      表格的渲染    html css
      <table>
          <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>年龄</th>
            <th>性别</th>
          </tr>
      </table>

      //  1.  请求后台接口  获取需要渲染的数据   let users =   [{},{},{},{}]

      //  2.   解析返回的数据  遍历

         for(){
              // 3.    创建节点对象   {username,age,sex}    tr     td
               for(对象){
                  //  td

                  // 添加td -> tr
               }
               // 4. 将  tr  追加到 table
         }
-->


<div id="app">
    <h1>数据类型数据的渲染</h1>
    <ul>
        <li v-for="(name,index) in names">{{name}} -- {{index}}</li>
    </ul>
    <h1>对象类型数据的渲染</h1>
    <ul>
        <li v-for=" (val,attr) in user" :key="">{{attr}} -- {{val}}</li>
    </ul>

    <h1>数组中是对象类型数据的渲染</h1>
    <table cellspacing="0" width="100%" border="1">
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr v-for="user in users">
            <td v-for="val in user" >{{val}}</td>
        </tr>
    </table>

</div>

<script src="../vue.js"></script>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            names:["tom","jack","xiaohei"],
            user:{
                id: "0001",
                username:'tom',
                age:20,
                sex:"男"
            },
            users:[
                {
                    id: "0001",
                    username:'tom',
                    age:20,
                    sex:"男"
                },
                {
                    id: "0002",
                    username:'tom',
                    age:20,
                    sex:"男"
                },
                {
                    id: "0003",
                    username:'tom',
                    age:20,
                    sex:"男"
                },
                {
                    id: "0004",
                    username:'tom',
                    age:20,
                    sex:"男"
                }
            ]
        },
        methods:{}
    })
</script>

</body>
</html>